<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智习伴 - 注册</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="static/css/style.css">
    <style>
        .role-option {
            transition: all 0.3s ease;
        }
        .role-option.selected {
            border-color: #3b82f6;
            background-color: #eff6ff;
            box-shadow: 0 4px 6px rgba(59, 130, 246, 0.1);
        }
        .role-option:hover {
            background-color: #f9fafb;
        }
        .password-strength {
            height: 5px;
            border-radius: 3px;
            margin-top: 5px;
            background-color: #e5e7eb;
        }
        .password-strength-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.3s ease, background-color 0.3s ease;
        }
    </style>
</head>
<body class="login-bg">
    <div class="login-card w-full max-w-md mx-4">
        <div class="p-8">
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-gray-800 mb-2">智习伴</h1>
                <p class="text-gray-600">创建您的学习账户</p>
            </div>
            
            <form id="registerForm">
                <div class="mb-4">
                    <label for="username" class="block text-gray-700 text-sm font-medium mb-2">用户名</label>
                    <input type="text" id="username" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
                    <div id="username-error" class="text-red-500 text-xs mt-1 hidden"></div>
                </div>
                
                <div class="mb-4">
                    <label for="email" class="block text-gray-700 text-sm font-medium mb-2">邮箱</label>
                    <input type="email" id="email" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
                    <div id="email-error" class="text-red-500 text-xs mt-1 hidden"></div>
                </div>
                
                <div class="mb-4">
                    <label for="password" class="block text-gray-700 text-sm font-medium mb-2">密码</label>
                    <input type="password" id="password" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
                    <div class="password-strength">
                        <div class="password-strength-fill" id="passwordStrength" style="width: 0%;"></div>
                    </div>
                    <div class="text-gray-500 text-xs mt-1">至少8个字符，包含大小写字母和数字</div>
                    <div id="password-error" class="text-red-500 text-xs mt-1 hidden"></div>
                </div>
                
                <div class="mb-6">
                    <label class="block text-gray-700 text-sm font-medium mb-2">选择角色</label>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="role-option border-2 border-gray-200 rounded-lg p-4 cursor-pointer selected" data-role="student">
                            <div class="text-center">
                                <div class="text-2xl mb-2">👨‍🎓</div>
                                <div class="font-medium text-gray-800">学生</div>
                                <div class="text-xs text-gray-500 mt-1">学习知识，完成练习</div>
                            </div>
                        </div>
                        <div class="role-option border-2 border-gray-200 rounded-lg p-4 cursor-pointer" data-role="teacher">
                            <div class="text-center">
                                <div class="text-2xl mb-2">👩‍🏫</div>
                                <div class="font-medium text-gray-800">教师</div>
                                <div class="text-xs text-gray-500 mt-1">创建课程，管理学生</div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="role" name="role" value="student">
                </div>
                
                <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                    注册
                </button>
            </form>
            
            <div class="mt-6 text-center">
                <p class="text-gray-600 text-sm">
                    已有账户？
                    <a href="login.html" class="text-blue-500 hover:text-blue-700 font-medium">立即登录</a>
                </p>
            </div>
        </div>
    </div>

    <script>
        // 角色选择功能
        document.querySelectorAll('.role-option').forEach(option => {
            option.addEventListener('click', function() {
                // 移除所有选中状态
                document.querySelectorAll('.role-option').forEach(opt => {
                    opt.classList.remove('selected');
                });
                
                // 添加选中状态到当前选项
                this.classList.add('selected');
                
                // 更新隐藏字段的值
                document.getElementById('role').value = this.dataset.role;
            });
        });
        
        // 密码强度检查
        document.getElementById('password').addEventListener('input', function() {
            const password = this.value;
            const strengthBar = document.getElementById('passwordStrength');
            
            // 简单的密码强度检查
            let strength = 0;
            if (password.length >= 8) strength += 25;
            if (/[A-Z]/.test(password)) strength += 25;
            if (/[a-z]/.test(password)) strength += 25;
            if (/[0-9]/.test(password)) strength += 25;
            
            strengthBar.style.width = strength + '%';
            
            // 根据强度改变颜色
            if (strength < 50) {
                strengthBar.style.backgroundColor = '#ef4444'; // 红色
            } else if (strength < 75) {
                strengthBar.style.backgroundColor = '#f59e0b'; // 黄色
            } else {
                strengthBar.style.backgroundColor = '#10b981'; // 绿色
            }
        });
        
        document.getElementById('registerForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const role = document.getElementById('role').value;
            
            // 这里应该是实际的注册API调用
            console.log('注册信息:', { username, email, password, role });
            
            // 模拟注册成功
            alert('注册成功！');
            window.location.href = 'login.html';
        });
    </script>
</body>
</html>